<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头函数不宜使用的场景</title>
		<style type="text/css">
			.in{
				background: cadetblue;
			}
		</style>
	</head>
	<body>
		<!-- 
		 * 箭头函数不宜使用的场景：
		    1、作为构造函数
		    2、事件绑定
		    3、需要使用arguments的时候
			4、需要使用yield命令的时候
		-->
		
		<button type="button" class="zoom">按钮</button>
		<script type="text/javascript">
			// 1.作为构造函数,一个方法需要绑定到对象
			const Person=function(name,age){//如果使用箭头函数就会报错,箭头函数没有this
				this.name=name;
				this.age=age;
			}
			const Jelly=new Person('jelly',5);
			console.log(Jelly);//Person is not a constructor
			Person.prototype.updateAge=()=>{
				this.age++
				console.log(this.age)
			}
			Jelly.updateAge()//NaN
			
			// 2.事件绑定,当你真的需要this的时候
			const button=document.querySelector('.zoom');
			button.addEventListener('click',function(){//如果使用箭头函数，外层又没有this，所以this指向window 报错Cannot read property 'add' of undefined
				this.classList.add('in');
				setTimeout(()=>{//如果使用普通函数,由于此方法是window下的方法,所以this指向window,报错Cannot read property 'remove' of undefined
					this.classList.remove('in');
				},2000)
			})
			
			// 3.需要使用arguments的时候
			//如果使用箭头函数报错,箭头函数没有arguments对象 arguments is not defined
			const sum=function(){
				return Array.from(arguments).reduce((prev,value)=>prev+value,0)
			}
			console.log(sum(1,2,3));//6
			
			
			// 4.需要使用yield命令的时候，因此箭头函数不能用作 Generator 函数。
		
		
			
		</script>
	</body>
</html>
